import Css from './css-tp.mjs'

const keys = Object.keys(Css.numsVal).join('|')
const rex = new RegExp(`(${keys})(\\d+[p%]?|a)-?(\\d+[p]?|a)?`,'g')

const mapUnit = (val) => {
    if(val === 'a') return 'auto'
    if(/p$|%$/.test(val)) return `${val.slice(0,-1)}%`
    return `${val}px`
}

let str = 'BDx20 MX40 PLT30 MLB50p-30 MXa MX50% PX20p WH200%'


let arr = str.match(rex)
let css = arr.join('\n').replace(rex, (name, key, val1, val2) => { 
    name = /(%)/.test(name) ? name.replace('%','\\%') : name
    val2 = val2 ? val2 : val1
    let val_1 = mapUnit(val1)
    let val_2 = mapUnit(val2)
    let css = Css.numsVal[key].replace('VAL1', val_1).replace('VAL2', val_2)
    return `${name}{${css}}`
})

console.log(css);